<template>
  <ion-page>
    <ion-header>
        <ion-toolbar color="light" class="pub-hearder">
        <ion-buttons slot="start">
          <ion-back-button text=""></ion-back-button>
        </ion-buttons>
        <ion-title>
            校考院校的招生简章
        </ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-row>
            <ion-col size="4" v-for="(item, index) in fileList" :key="index">
                <img src="@/assets/images/icon-pdf.png" alt="">
                <div>{{ item.title }}</div>
            </ion-col>
        </ion-row>
    </ion-content>
    <ion-footer>
        <ion-toolbar  class="pub-hearder">
            <!-- 免费下载 -->
            <button ion-button block @click="down()">开通会员，资料免费下</button>
        </ion-toolbar>
    </ion-footer>
  </ion-page>
</template>

<script lang="ts">
import { IonPage, IonContent, IonHeader, IonToolbar, IonButtons, IonBackButton,  IonTitle, IonRow, IonCol, IonFooter } from '@ionic/vue';
import { chevronForwardOutline } from 'ionicons/icons';
import { reactive, toRefs, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { PublicService } from '@/utils/public';
const publicService = new PublicService();
export default {
  name: 'login-page',
  components: {
    IonPage, IonContent, IonHeader, IonToolbar, IonButtons, IonBackButton,  IonTitle, IonRow, IonCol, IonFooter
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    let t: any;
    const state = reactive({
        slideOpts: {   // 滑动配置
            initialSlide: 0,
            speed: 400,
            observer: true, // 修改swiper自己或子元素时，自动初始化swiper
            observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        },
        fileList: [
            {
                title: '2025年3月中央音乐学院考试2025年3月中央音乐学院考试',
                id: 1
            },
            {
                title: '2025年3月中央音乐学院考试',
                id: 1
            },
            {
                title: '2025年3月中央音乐学院考试',
                id: 1
            },
            {
                title: '2025年3月中央音乐学院考试',
                id: 1
            },
            {
                title: '2025年3月中央音乐学院考试',
                id: 1
            },
            {
                title: '2025年3月中央音乐学院考试',
                id: 1
            }
        ],
        
    })

    return {
      ...toRefs(state),
      chevronForwardOutline,
    }
  }
}
</script>
<style lang="scss" scoped>
ion-header{
  ion-toolbar{
    --padding-top: 0px;
    --padding-bottom: 0px;
    --padding-start: 0px;
    --padding-end: 0px;
  }
}
ion-content{
    --padding-start: 10px;
    --padding-end: 10px;
    ion-col{
        font-size: 14px;
        color: #333333;
        div{
            overflow: hidden;  //超出隐藏

            text-overflow: ellipsis; //文本超出时显示省略号

            display: -webkit-box;

            -webkit-box-orient: vertical;//子元素排列 vertical（竖排）orhorizontal（横排）

            -webkit-line-clamp: 2;//内容限制的行数
        }
    }
    img{
        width: 100%;
        height: 88px;
    }
}
button {
    width: 100%;
    height: 40px;
    border-radius: 10px;
    color: #fff;
    background: #CA3032;
    margin-bottom: 10px;
    img{
      width: 20px;
      margin-right: 5px;
      vertical-align: middle;
    }
  }
</style>